<template>
  <div>
    <!--tab切换区域-->
    <Tabs :option="tabsOption" @change="changeTabsMethods" />
    <div class="tabsChangeContent">
      <!--余额查询-->
      <div v-show="changeTabOption.prop===0">
        <SimpleData :simple-data="balanceAccountData" :option="balanceOption" />
      </div>
      <!--明细查询-->
      <div v-show="changeTabOption.prop===1">
        <CommonTable
          :option="detailSearchOption"
          :button-self="detailButtonArray"
          :data="detailSearchData"
          :page="pageDetailDetailSearch"
          @selfButton="selfButtonDetail"
          @search="search"
          @sizeChange="sizeChangeDetailSearch"
          @currentChange="currentChangeDetailSearch"
        />
      </div>
      <!--子账户查询-->
      <div v-show="changeTabOption.prop===2">
        <CommonTable
          :option="subAccountOption"
          :data="subAccountData"
          :page="pageDetailSubAccount"
          @search="querySubBank"
          @sizeChange="sizeChangeSubAccount"
          @currentChange="currentChangeSubAccount"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'
import $ from 'jquery'
import InformationCompany from '@/components/common/InformationCompany'
import Tabs from '@/components/common/Tabs'
import SimpleData from '@/components/common/SimpleData'
import CommonTable from '@/components/common/CommonTable'
import ChildDropDown from '@/components/common/DropDownLoad'
import { queryLoss } from '@/api/bankBiz/loss/loss'

export default {
  name: 'AccInfo',
  components: {
    Tabs,
    SimpleData,
    CommonTable
  },
  data() {
    return {
      tabsOption: {
        column: [
          {
            label: '余额查询',
            prop: 0
          }, {
            label: '明细查询',
            prop: 1
          },
          {
            label: '子账户查询',
            prop: 2
          }
        ]
      },
      listInfoDetailData: {},
      changeTabOption: {},
      iconPic: ['el-icon-caret-top', 'color-red'],
      // 余额查询
      balanceAccountData: {
        'currency': '币种',
        'balance': '余额',
        'availableBalance': '可用余额'
      },
      balanceOption: {
        column: [
          {
            'prop': 'currency',
            'label': '币种',
            'span': 8
          },
          {
            'prop': 'balance',
            'label': '余额',
            'span': 8
          },
          {
            'prop': 'availableBalance',
            'label': '可用余额',
            'span': 8
          }
        ]
      },
      // 明细查询
      detailSearchOption: {},
      detailSearchData: [],
      detailButtonArray: [
        {
          label: '最近10笔',
          prop: 0
        },
        {
          label: '最近10日',
          prop: 1
        }
      ],
      // 子账户查询
      subAccountData: [],
      subAccountOption: {},
      pageDetailDetailSearch: {
        pageSizes: [10, 20, 30, 40],
        currentPage: 1,
        total: 10,
        pageSize: 10
      },
      pageDetailSubAccount: {
        pageSizes: [10, 20, 30, 40],
        currentPage: 1,
        total: 10,
        pageSize: 10
      }
    }
  },
  created() {
    $('.show-icon').show()
    this.changeTabOption.prop = 0
    // 明细查询条件配置
    this.setQueryConditionOption()
    // 子账户查询条件配置
    this.setSubAccountOption()
    // 余额查询
    this.quertyBalanceData()
    // 明细查询
    this.search()
    // 子账户查询
    this.querySubBank()
  },
  methods: {
    changeTabsMethods(data) {
      this.changeTabOption = data
      // this.$message.success(JSON.stringify(data))
    },
    // 余额查询
    quertyBalanceData() {
      return
      // 调接口
      const balanceAccountParams = {
        namespace: 'Company',
        key: 'balanceAccountData'
      }
      queryLoss(balanceAccountParams).then((res) => {
        this.balanceAccountData = res.data.data
      })
    },
    // 明细查询条件配置
    setQueryConditionOption() {
      Axios.post('/api/company').then((res) => {
        this.detailSearchOption = res.data.detailSearchOption
      }).catch((err) => {
        console.log(err)
      })
    },
    // 明细查询
    search() {
      // 调接口
      const detailSearchParams = {
        namespace: 'Company',
        key: 'detailSearchData',
        query: {
          pageSize: 10,
          currentPage: 1,
          transferDateStart: '2020-01-01',
          transferDateEnd: '2020-01-02'
        }
      }
      queryLoss(detailSearchParams).then((res) => {
        this.pageDetailDetailSearch.total = res.data.data.totalNum
        this.detailSearchData = res.data.data.dataObj
      })
    },
    // 自定按钮事件
    selfButtonDetail(prop) {
      // 最近10笔
      if (prop == this.detailButtonArray[0].prop) {
        console.log('触发最近10笔查询')
      }
      // 最近10日
      else if (prop == this.detailButtonArray[1].prop) {
        console.log('触发最近10日查询')
      }
    },
    // 子账户查询配置
    setSubAccountOption() {
      Axios.post('/api/company').then((res) => {
        this.subAccountOption = res.data.subAccountOption
      }).catch((err) => {
        console.log(err)
      })
    },
    // 子账户查询
    querySubBank() {
      // 调接口
      const subAccountParams = {
        namespace: 'Company',
        key: 'subAccountData',
        query: {
          pageSize: 10,
          currentPage: 1,
          accountType: 'A',
          currency: '美元',
          saveTime: '10年',
          openingDateStart: '2020-01-01',
          openingDateEnd: '2020-01-01'
        }
      }
      queryLoss(subAccountParams).then((res) => {
        this.pageDetailSubAccount.total = res.data.data.totalNum
        this.subAccountData = res.data.data.dataObj
      })
    },
    // 明细查询数据,切换行数
    sizeChangeDetailSearch(val) {
      this.pageDetailDetailSearch.currentPage = 1
      this.pageDetailDetailSearch.pageSize = val
      this.$message.success('行数' + val)
      // 调接口
      const detailSearchParams = {
        namespace: 'Company',
        key: 'detailSearchData',
        query: {
          pageSize: val,
          currentPage: 1,
          transferDateStart: '2020-01-01',
          transferDateEnd: '2020-01-02'
        }
      }
      queryLoss(detailSearchParams).then((res) => {
        this.pageDetailDetailSearch.total = res.data.data.totalNum
        this.detailSearchData = res.data.data.dataObj
      })
    },
    // 明细查询数据,切换页码
    currentChangeDetailSearch(val) {
      this.pageDetailDetailSearch.currentPage = val
      this.$message.success('页码' + val)
      // 调接口
      const detailSearchParams = {
        namespace: 'Company',
        key: 'detailSearchData',
        query: {
          pageSize: this.pageDetailDetailSearch.pageSize,
          currentPage: val,
          transferDateStart: '2020-01-01',
          transferDateEnd: '2020-01-02'
        }
      }
      queryLoss(detailSearchParams).then((res) => {
        this.pageDetailDetailSearch.total = res.data.data.totalNum
        this.detailSearchData = res.data.data.dataObj
      })
    },
    // 子账户查询数据,切换行数
    sizeChangeSubAccount(val) {
      this.pageDetailSubAccount.currentPage = 1
      this.pageDetailSubAccount.pageSize = val
      this.$message.success('行数' + val)
      // 调接口
      const subAccountParams = {
        namespace: 'Company',
        key: 'subAccountData',
        query: {
          pageSize: val,
          currentPage: 1,
          accountType: 'A',
          currency: '美元',
          saveTime: '10年',
          openingDateStart: '2020-01-01',
          openingDateEnd: '2020-01-01'
        }
      }
      queryLoss(subAccountParams).then((res) => {
        this.pageDetailSubAccount.total = res.data.data.totalNum
        this.subAccountData = res.data.data.dataObj
      })
    },
    // 子账户查询数据,切换页码
    currentChangeSubAccount(val) {
      this.pageDetailSubAccount.currentPage = val
      this.$message.success('页码' + val)
      // 调接口
      const subAccountParams = {
        namespace: 'Company',
        key: 'subAccountData',
        query: {
          pageSize: this.pageDetailSubAccount.pageSize,
          currentPage: val,
          accountType: 'A',
          currency: '美元',
          saveTime: '10年',
          openingDateStart: '2020-01-01',
          openingDateEnd: '2020-01-01'
        }
      }
      queryLoss(subAccountParams).then((res) => {
        this.pageDetailSubAccount.total = res.data.data.totalNum
        this.subAccountData = res.data.data.dataObj
      })
    }
  }
}
</script>

<style>
  .accTitle{line-height: 50px;}
  .companyBox .avue-group__item{padding: 0 !important;}
  .companyBox .avue-form__group > div{padding: 0 !important;}
  .dropDownLoadWrap{border:1px #eee solid;margin-top: 20px;}
  /*子模块区域*/
  .inlineStyle {
    width: 100px;
    display: inline-block;
    text-align: center;
  }
  .inlineStyle span {
    text-align: center;
    display: block;
  }
  .sonArea img {
    width: 70px;
    height: 70px;
  }
</style>
